<template>
  <div class="body-info">
    <div class="basic-left">
      <div class="basic-header">VD真空处理</div>
      <div class="dv-border dv-border-bg1" style="margin-bottom: 10px;">
        <div class="dv-line">
          <div class="dv-line-title">1号罐数据</div>
          <div class="dv-icon-box">
            <div class="dv-icon-info">
              <div class="dv-text">熔炼号</div>
            </div>
            <div class="bg-FFE04D">{{ vdVacuumVO?.f_rlh1 || '--' }}</div>
          </div>
          <div class="dv-icon-box">
            <div class="dv-icon-info">
              <div class="dv-text">真空度</div>
            </div>
            <div class="bg-32DCFB">{{ vdVacuumVO?.f_zkd1 || '--' }}</div>
          </div>
          <div class="dv-icon-box">
            <div class="dv-icon-info">
              <div class="dv-text">钢牌号</div>
            </div>
            <div class="bg-32DCFB">{{ vdVacuumVO?.f_gph1 || '--' }}</div>
          </div>
          <div class="dv-icon-box">
            <div class="dv-icon-info">
              <div class="dv-text">保压时间</div>
            </div>
            
            <div class="bg-32DCFB">{{ vdVacuumVO?.f_bysj1 || '--' }}<span style="font-size: 20px;">分钟</span></div>
          </div>
          <div class="dv-icon-box">
            <div class="dv-icon-info">
              <div class="dv-text">氩气流量</div>
            </div>
            <div class="bg-32DCFB">{{ vdVacuumVO?.f_yqll1 || '--' }}</div>
          </div>
        </div>
        <div style="width: 20px;display:flex;align-items:center;justify-content:center;">
          <div style="width:2px; height: 100%; background: rgba(8,30,74,0.8);"></div>
        </div>
        <div class="dv-line">
          <div class="dv-line-title">2号罐数据</div>
          <div class="dv-icon-box">
            <div class="dv-icon-info">
              <div class="dv-text">熔炼号</div>
            </div>
            <div class="bg-FFE04D">{{ vdVacuumVO?.f_rlh1 || '--' }}</div>
          </div>
          <div class="dv-icon-box">
            <div class="dv-icon-info">
              <div class="dv-text">真空度</div>
            </div>
            <div class="bg-32DCFB">{{ vdVacuumVO?.f_zkd2 || '--' }}</div>
          </div>
          <div class="dv-icon-box">
            <div class="dv-icon-info">
              <div class="dv-text">钢牌号</div>
            </div>
            <div class="bg-32DCFB">{{ vdVacuumVO?.f_gph2 || '--' }}</div>
          </div>
          <div class="dv-icon-box">
            <div class="dv-icon-info">
              <div class="dv-text">保压时间</div>
            </div>
            <div class="bg-32DCFB">{{ vdVacuumVO?.f_bysj2 || '--' }}<span style="font-size: 20px;">分钟</span></div>
          </div>
          <div class="dv-icon-box">
            <div class="dv-icon-info">
              <div class="dv-text">氩气流量</div>
            </div>
            <div class="bg-32DCFB">{{ vdVacuumVO?.f_yqll2 || '--' }}</div>
          </div>
        </div>
      </div>
      <div class="basic-header">其他信息</div>
      <div class="dv-border dv-border-bg2">
        <div class="dv-line" style="border-right:2px solid rgba(8,30,74,0.8);">
          <div class="dv-icon-box dv-icon-bottom">
            <div class="dv-icon-info">
              <div class="dv-text">大罐重量</div>
            </div>
            <div class="bg-FFE04D">{{ otherInfoVO?.f_dgzl || '--' }}</div>
          </div>

          <div class="dv-icon-box dv-icon-bottom">
            <div class="dv-icon-info">
              <div class="dv-text">中包重量</div>
            </div>
            <div class="bg-32DCFB">{{ otherInfoVO?.f_zbzl || '--' }}</div>
          </div>

          <div class="dv-icon-box dv-icon-bottom">
            <div class="dv-icon-info">
              <div class="dv-text">连铸温度</div>
            </div>
            <div class="bg-32DCFB">{{ otherInfoVO?.f_lzwd || '--' }}</div>
          </div>



        </div>
        <div class="dv-line" style="padding:40px 0;">
          <div class="dv-icon-box">
            <div class="dv-icon-info">
              <div class="dv-text">中包烘烤1#车</div>
            </div>
            <div class="bg-FFE04D">{{ otherInfoVO?.f_zbhk1 || '--' }}</div>
          </div>
          <div class="dv-icon-box">
            <div class="dv-icon-info">
              <div class="dv-text">中包烘烤2#车</div>
            </div>
            <div class="bg-32DCFB">{{ otherInfoVO?.f_zbhk2 || '--' }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="basic-w"></div>
    <div class="basic-center">
      <div class="basic-header">基础信息</div>
      <div class="dv-border dv-border-bg5">
        <div class="dv-icon-box">
          <div class="dv-icon-info">
            <div class="dv-text">熔炼号</div>
          </div>
          <div class="dv-icon-text">
            <span class="bg-FFE04D">{{ baseInfoVO?.f_rlh || '--' }}</span>
          </div>
        </div>
        <div class="dv-icon-box">
          <div class="dv-icon-info">
            <div class="dv-text">钢牌号</div>
          </div>
          <div class="dv-icon-text">

            <span class="bg-32DCFB">{{ baseInfoVO?.f_gph || '--' }}</span>
          </div>
        </div>
        <div class="dv-icon-box">
          <div class="dv-icon-info">
            <div class="dv-text">断面</div>
          </div>
          <div class="dv-icon-text">

            <span class="bg-FFE04D">{{ baseInfoVO?.f_dm || '--' }}</span>
          </div>
        </div>
        <div class="dv-icon-box">
          <div class="dv-icon-info">
            <div class="dv-text">开浇时间</div>
          </div>
          <div class="dv-icon-text">

            <span class="bg-32DCFB">{{ baseInfoVO?.f_kjsj || '--' }}</span>
          </div>
        </div>

      </div>
      <div class="basic-header">结晶器液面</div>
      <div class="dv-border dv-border-bg4">
        <div class="bg3-box" style="border-right:2px solid rgba(8,30,74,0.8);">
          <div class="dv-icon-box">
            <div class="dv-icon-info">
              <div class="dv-text">1流</div>
            </div>
            <div class="dv-icon-text">
              <span class="znf">设定值</span>
              <span class="bg-FFE04D">{{ jjqymVO?.f_set_value_1 || '--' }}</span>

              <span class="znfx">实际值</span>
              <span class="bg-32DCFB">{{ jjqymVO?.f_actual_value_1 || '--' }}</span>
            </div>
          </div>
          <div class="dv-icon-box">
            <div class="dv-icon-info">
              <div class="dv-text">3流</div>
            </div>
            <div class="dv-icon-text">
              <span class="znf">设定值</span>
              <span class="bg-FFE04D">{{ jjqymVO?.f_set_value_3 || '--' }}</span>

              <span class="znfx">实际值</span>
              <span class="bg-32DCFB">{{ jjqymVO?.f_actual_value_3 || '--' }}</span>
            </div>
          </div>
        </div>

        <div class="bg3-box">
          <div class="dv-icon-box">
            <div class="dv-icon-info">
              <div class="dv-text">2流</div>
            </div>
            <div class="dv-icon-text">
              <span class="znf">设定值</span>
              <span class="bg-FFE04D">{{ jjqymVO?.f_set_value_2 || '--' }}</span>

              <span class="znfx">实际值</span>
              <span class="bg-32DCFB">{{ jjqymVO?.f_actual_value_2 || '--' }}</span>
            </div>
          </div>
          <div class="dv-icon-box">
            <div class="dv-icon-info">
              <div class="dv-text">4流</div>
            </div>
            <div class="dv-icon-text">
              <span class="znf">设定值</span>
              <span class="bg-FFE04D">{{ jjqymVO?.f_set_value_4 || '--' }}</span>

              <span class="znfx">实际值</span>
              <span class="bg-32DCFB">{{ jjqymVO?.f_actual_value_4 || '--' }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="basic-header">拉 速</div>
      <div class="dv-border dv-border-bg5">

        <div class="dv-icon-box">
          <div class="dv-icon-info">
            <div class="dv-text">1流</div>
          </div>
          <div class="dv-icon-text">

            <span class="bg-FFE04D">{{ lsVO?.f_stream_1 || '--' }}</span>
          </div>
        </div>
        <div class="dv-icon-box">
          <div class="dv-icon-info">
            <div class="dv-text">2流</div>
          </div>
          <div class="dv-icon-text">

            <span class="bg-32DCFB">{{ lsVO?.f_stream_2 || '--' }}</span>
          </div>
        </div>
        <div class="dv-icon-box">
          <div class="dv-icon-info">
            <div class="dv-text">3流</div>
          </div>
          <div class="dv-icon-text">

            <span class="bg-FFE04D">{{ lsVO?.f_stream_3 || '--' }}</span>
          </div>
        </div>
        <div class="dv-icon-box">
          <div class="dv-icon-info">
            <div class="dv-text">4流</div>
          </div>
          <div class="dv-icon-text">

            <span class="bg-32DCFB">{{ lsVO?.f_stream_4 || '--' }}</span>
          </div>
        </div>

      </div>
      <div class="basic-header">电磁搅拌频率:1.5HZ</div>
      <div class="dv-border dv-border-bg5">
        <div class="dv-icon-box">
          <div class="dv-icon-info">
            <div class="dv-text">1流</div>
          </div>
          <div class="dv-icon-text">
            <span class="bg-FFE04D">{{ dcjbVO?.f_stream_1 || '--' }}</span>
          </div>
        </div>
        <div class="dv-icon-box">
          <div class="dv-icon-info">
            <div class="dv-text">2流</div>
          </div>
          <div class="dv-icon-text">

            <span class="bg-32DCFB">{{ dcjbVO?.f_stream_2 || '--' }}</span>
          </div>
        </div>
        <div class="dv-icon-box">
          <div class="dv-icon-info">
            <div class="dv-text">3流</div>
          </div>
          <div class="dv-icon-text">
            <span class="bg-FFE04D">{{ dcjbVO?.f_stream_3 || '--' }}</span>
          </div>
        </div>
        <div class="dv-icon-box">
          <div class="dv-icon-info">
            <div class="dv-text">4流</div>
          </div>
          <div class="dv-icon-text">
            <span class="bg-32DCFB">{{ dcjbVO?.f_stream_4 || '--' }}</span>
          </div>
        </div>


      </div>


      <div class="basic-header">LF3#炉数据</div>

      <div class="dv-border dv-border-bg5">
        <div class="dv-icon-box">
          <div class="dv-icon-info">
            <div class="dv-text">熔炼号</div>
          </div>
          <div class="dv-icon-text">
            <span class="bg-FFE04D">{{ lf3lVO?.f_rlh || '--' }}</span>
          </div>
        </div>
        <div class="dv-icon-box">
          <div class="dv-icon-info">
            <div class="dv-text">钢牌号</div>
          </div>
          <div class="dv-icon-text">

            <span class="bg-32DCFB">{{ lf3lVO?.f_gph || '--' }}</span>
          </div>
        </div>
        <div class="dv-icon-box">
          <div class="dv-icon-info">
            <div class="dv-text">钢水温度</div>
          </div>
          <div class="dv-icon-text">

            <span class="bg-FFE04D">{{ lf3lVO?.f_gswd || '--' }}</span>
          </div>
        </div>
        <div class="dv-icon-box">
          <div class="dv-icon-info">
            <div class="dv-text">氩气流量</div>
          </div>
          <div class="dv-icon-text">

            <span class="bg-32DCFB">{{ lf3lVO?.f_yqll || '--' }}</span>
          </div>
        </div>

      </div>
    </div>
    <div class="basic-w"></div>
    <div class="basic-right">
      <div class="basic-header">化学成分</div>
      <div class="dv-border dv-border-bg8">
        <div class="dv-line" style="max-width: 100px;">
          <div class="dv-icon-info">
            <div class="dv-text">炉号</div>
          </div>
          <div class="dv-li dv-bold">C</div>
          <div class="dv-li dv-bold">SI</div>
          <div class="dv-li dv-bold">MN</div>
          <div class="dv-li dv-bold">P</div>
          <div class="dv-li dv-bold">S</div>
          <div class="dv-li dv-bold">V</div>
          <div class="dv-li dv-bold">AI</div>
          <div class="dv-li dv-bold">O</div>
          <div class="dv-li dv-bold">N</div>
          <div class="dv-li dv-bold">H</div>
        </div>
        <div class="dv-line" style="border-right:2px solid rgba(8,30,74,0.8);">
          <div class="dv-li bg-FFE04D">{{ chemicalVO?.f_lh_1 || '--' }}</div>
          <div class="dv-li bg-32DCFB">{{ chemicalVO?.f_c_1 || '--' }}</div>
          <div class="dv-li bg-32DCFB">{{ chemicalVO?.f_si_1 || '--' }}</div>
          <div class="dv-li bg-32DCFB">{{ chemicalVO?.f_mn_1 || '--' }}</div>
          <div class="dv-li bg-32DCFB">{{ chemicalVO?.f_p_1 || '--' }}</div>
          <div class="dv-li bg-32DCFB">{{ chemicalVO?.f_s_1 || '--' }}</div>
          <div class="dv-li bg-32DCFB">{{ chemicalVO?.f_v_1 || '--' }}</div>
          <div class="dv-li bg-32DCFB">{{ chemicalVO?.f_ai_1 || '--' }}</div>
          <div class="dv-li bg-32DCFB">{{ chemicalVO?.f_o_1 || '--' }}</div>
          <div class="dv-li bg-32DCFB">{{ chemicalVO?.f_n_1 || '--' }}</div>
          <div class="dv-li bg-32DCFB">{{ chemicalVO?.f_h_1 || '--' }}</div>
        </div>
        <div class="dv-line" style="padding-left:90px;">
          <div class="dv-li bg-FFE04D">{{ chemicalVO?.f_lh_2 || '--' }}</div>
          <div class="dv-li bg-32DCFB">{{ chemicalVO?.f_c_2 || '--' }}</div>
          <div class="dv-li bg-32DCFB">{{ chemicalVO?.f_si_2 || '--' }}</div>
          <div class="dv-li bg-32DCFB">{{ chemicalVO?.f_mn_2 || '--' }}</div>
          <div class="dv-li bg-32DCFB">{{ chemicalVO?.f_p_2 || '--' }}</div>
          <div class="dv-li bg-32DCFB">{{ chemicalVO?.f_s_2 || '--' }}</div>
          <div class="dv-li bg-32DCFB">{{ chemicalVO?.f_v_2 || '--' }}</div>
          <div class="dv-li bg-32DCFB">{{ chemicalVO?.f_ai_2 || '--' }}</div>
          <div class="dv-li bg-32DCFB">{{ chemicalVO?.f_o_2 || '--' }}</div>
          <div class="dv-li bg-32DCFB">{{ chemicalVO?.f_n_2 || '--' }}</div>
          <div class="dv-li bg-32DCFB">{{ chemicalVO?.f_h_2 || '--' }}</div>
        </div>
      </div>
      <div class="basic-header">定氢值</div>
      <div class="dv-border dv-border-bg9">
        <div class="dv-icon-box" style="border-right:2px solid rgba(8,30,74,0.8);">
          <div class="dv-icon-info">
            <div class="dv-text">定氢值</div>
          </div>
          <div class="dv-icon-text">

            <span class="zn bg-FFE04D">{{ hydrogenVO?.f_dqz || '--' }}</span>
          </div>
        </div>
        <div class="dv-icon-box">
          <div class="dv-icon-info">
            <div class="dv-text">大包重量</div>
          </div>
          <div class="dv-icon-text">

            <span class="zn bg-FFE04D">{{ hydrogenVO?.f_dbzl || '--' }}</span>
          </div>
        </div>
        <div class="dv-icon-box" style="width: 100%;">
          <div class="dv-icon-info">
            <div class="dv-text">定氢时间</div>
          </div>
          <div class="dv-icon-text">
            <span class="bg-32DCFB" style="font-size:20px;">{{ hydrogenVO?.f_dqsj || '--' }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getVdzk, getLzgy, getChemical, getOtherInfo, getLF3l, getHydrogen } from "@/utils/api";
export default {

  data() {
    return {
      chemicalVO: {
        f_lh_1: "21321325",
        f_c_1: "0.75",
        f_si_1: "0.71",
        f_mn_1: "0.92",
        f_p_1: "0.011",
        f_s_1: "0.006",
        f_v_1: "0.042",
        f_ai_1: "0.003",
        f_o_1: "15",
        f_n_1: "44",
        f_h_1: "1.2",
        f_lh_2: "21321325",
        f_c_2: "0.75",
        f_si_2: "0.71",
        f_mn_2: "0.92",
        f_p_2: "0.011",
        f_s_2: "0.006",
        f_v_2: "0.042",
        f_ai_2: "0.003",
        f_o_2: "15",
        f_n_2: "44",
        f_h_2: "1.2"
      },


      vdVacuumVO: {
        f_rlh1: "2540000L",
        f_rlh2: "2540000L",

        f_zkd1: "66.7",
        f_zkd2: "66.7",

        f_gph1: "U75V",
        f_gph2: "U75V",

        f_bysj1: "18",
        f_bysj2: "18",

        f_yqll1: "33",
        f_yqll2: "33"
      },

      otherInfoVO: {
        f_dgzl: "50",
        f_zbzl: "30",
        f_lzwd: "1505",
        f_zbhk1: "518",
        f_zbhk2: "0"
      },

      dcjbVO: {
        f_stream_1: "1.2",
        f_stream_2: "1.2",
        f_stream_3: "42",
        f_stream_4: "42"
      },

      jjqymVO: {
        f_set_value_1: "1.2",
        f_actual_value_1: "1.2",
        f_set_value_2: "1.2",
        f_actual_value_2: "1.2",
        f_set_value_3: "1.2",
        f_actual_value_3: "1.2",
        f_set_value_4: "1.2",
        f_actual_value_4: "1.2"
      },

      lsVO: {
        f_stream_1: "1.2",
        f_stream_2: "1.2",
        f_stream_3: "42",
        f_stream_4: "42"
      },

      baseInfoVO: {
        f_rlh: "1.2",
        f_gph: "1.2",
        f_dm: "4.2",
        f_kjsj: "4.2"
      },

      hydrogenVO: {
        f_dqz: "1.2",
        f_dbzl: "42",
        f_dqsj: "2025-02-02 10:32:50"
      },

      lf3lVO: {
        f_rlh: "1.2",
        f_gph: "1.2",
        f_gswd: "4.2",
        f_yqll: "4.2"
      }

    };
  },

  mounted() {
    // this.getBaseDataInfo();
    // this.getVdzk();
    // this.getLzgy();
    // this.getChemical();
    // this.getOtherInfo();
    // this.getLF3l();
    // this.getHydrogen();

  },

  methods: {
    async getVdzk() {
      const data = await getVdzk({})
      let res = data?.data;
      this.vdVacuumVO = res;
    },
    async getLzgy() {
      const data = await getLzgy({})
      let res = data?.data;
      this.baseInfoVO = res?.lzgyVO?.baseInfoVO;
      this.jjqymVO = res?.lzgyVO?.jjqymVO;
      this.lsVO = res?.lzgyVO?.lsVO;
      this.dcjbVO = res?.lzgyVO?.dcjbVO;
    },
    async getChemical() {
      const data = await getChemical({})
      let res = data?.data;
      this.chemicalVO = res;
    },
    async getOtherInfo() {
      const data = await getOtherInfo({})
      let res = data?.data;
      this.otherInfoVO = res;
    },
    async getLF3l() {
      const data = await getLF3l({})
      let res = data?.data;
      this.lf3lVO = res;
    },
    async getHydrogen() {
      const data = await getHydrogen({})
      let res = data?.data;
      this.hydrogenVO = res;
    }

  }
};
</script>
<style lang="scss" scoped>
.body-info {
  padding: 0 20px;
  //   padding-bottom: 16px;
  width: 100%;
  height: 100%;
  display: flex;

  .basic-center {
    // padding:20px 0 0 0;
    width: 612px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;

    .basic-header {
      min-height: 49px;
      width: 614px;
      background-image: url("../assets/image/614_49.png");
      background-size: 100% 100%;
      color:#FFFFFF;
      background-position: center center;
      font-size: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
      font-weight: bold;
    }

    .dv-border {
      width: 612px;
      margin-bottom: 10px;
      background-size: 100% 100%;
      background-position: center center;
    }
    .dv-border-bg5 {
      width: 612px;
      height: 107px;
      display: flex;
      //   margin-bottom:10px;
      background-image: url("../assets/image/612_107.png");
      background-size: 100% 100%;
      // display: flex;
      padding: 24px 0  0 0;

      .dv-icon-box {
        margin-bottom: 12px;
        width: 0;
        flex: 1;
        border-right:2px solid rgba(8,30,74,0.8);
        padding-left: 30px;
        
        .dv-icon-text {
          display: flex;

          .znf {
            font-size: 14px;
            color: #ffffff;
          }
          
        }

        .dv-icon-info {
          display: flex;
          align-items: center;
          margin-bottom: 6px;

          .dv-icon {
            width: 18px;
            margin-right: 10px;
            height: 16px;
            background-image: url("../assets/image/icon.png");
            background-size: cover;
            background-position: center center;
          }

          .dv-text {
            font-size: 20px;
            color: #C2F6FF;
          }
        }
      }

    }

    .dv-border-bg4 {
      height: 172px;
      background-image: url("../assets/image/612_172.png");
      background-size: 100% 100%;
      display: flex;
      padding: 20px 0;

      .bg3-box {
        width: 0;
        flex: 1;
        
        padding-left: 30px;
        .dv-icon-box {
          margin-bottom: 8px;

          .dv-icon-text {
            display: flex;

            .znf {
              font-size: 20px;
              color: #C2F6FF;
              display:flex;
              align-items:center;
              margin-right:6px;
            }

            .znfx {
              margin-left: 28px;
              font-size: 20px;
              
              margin-right:6px;
              color: #C2F6FF;
              display:flex;
              align-items:center;
            }

            
          }

          .dv-icon-info {
            display: flex;
            align-items: center;
            // margin-bottom: 10px;

            .dv-icon {
              width: 18px;
              margin-right: 10px;
              height: 16px;
              background-image: url("../assets/image/icon.png");
              background-size: cover;
              background-position: center center;
            }

            .dv-text {
              font-size: 20px;
              color: #C2F6FF;
            }
          }
        }
      }
    }
  }

  .basic-w {
    width: 0;
    flex: 1;
  }

  .basic-left,
  .basic-right {
    width: 614px;
    // padding-bottom: 16px;
    display: flex;
    flex-direction: column;

    .basic-header {
      min-height: 49px;
      width: 614px;
      background-image: url("../assets/image/614_49.png");
      background-size: 100% 100%;
      color:#FFFFFF;
      background-position: center center;
      font-size: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
      font-weight: bold;
      // font-style: italic;
    }

    .mb-12 {
      margin-bottom: 12px;
    }

    .dv-border {
      //   flex: 1;
      //   height: 0;
      width: 612px;
      background-size: 100% 100%;
      background-position: center center;
    }

    .dv-border-bg9 {
      height: 230px;
      background-image: url("../assets/image/612_280.png");
      background-size: 100% 100%;
      display: flex;
      padding: 40px 30px;
      flex-wrap: wrap;

      .dv-icon-box {
        margin-bottom: 20px;
        width: 50%;
        padding-left: 80px;

        .dv-icon-text {
          display: flex;

          
        }

        .dv-icon-info {
          display: flex;
          align-items: center;
          margin-bottom: 12px;

          .dv-icon {
            width: 18px;
            margin-right: 10px;
            height: 16px;
            background-image: url("../assets/image/icon.png");
            background-size: cover;
            background-position: center center;
          }

          .dv-text {
            font-size: 20px;
            color: #C2F6FF;
          }
        }
      }
    }

    .dv-border-bg8 {
      height: 577px;
      background-image: url("../assets/image/612_577.png");
      background-size: 100% 100%;
      display: flex;
      padding: 30px 40px;
      margin-bottom: 8px;

      .dv-line {
        width: 0;
        flex: 1;

        .dv-icon-info {
          display: flex;
          align-items: center;
          height: 50px;

          .dv-icon {
            width: 18px;
            margin-right: 10px;
            height: 16px;
            background-image: url("../assets/image/icon.png");
            background-size: cover;
            background-position: center center;
          }

          .dv-text {
            font-size: 20px;
            color: #C2F6FF;
          }
        }

        .dv-li {
          height: 48px;
          line-height: 48px;
          // font-size: 32px;
          // color: #32DCFB;
          // background: linear-gradient( #32DCFB, rgba(255,255,255,0.36) 100%);
          // -webkit-background-clip: text;
          // -webkit-text-fill-color: transparent;
        }

        .dv-bold {
          color: #C2F6FF;
          font-size: 20px;
        }
      }
    }

    .dv-border-bg1,
    .dv-border-bg2 {
      height: 532px;
      background-image: url("../assets/image/612_532.png");
      display: flex;
      padding: 26px;

      .dv-line {
        width: 0;
        flex: 1;

        // padding-top: 20px;
        // padding-left: 50px;
        .dv-line-title {
          font-size: 20px;
          width: 100%;
          height: 42px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: bold;
          background-image: url("../assets/image/264_42.png");
          background-size: 100% 100%;
          color: #ffffff;
          margin-bottom: 24px;
        }

        .dv-icon-box {
          margin-bottom: 20px;
          padding-left: 90px;

          
          .dv-icon-info {
            display: flex;
            align-items: center;
            // margin-bottom: 14px;

            // padding-left: 40px;
            .dv-icon {
              width: 18px;
              margin-right: 10px;
              height: 16px;
              background-image: url("../assets/image/icon.png");
              background-size: cover;
              background-position: center center;
            }

            .dv-text {
              font-size: 20px;
              color: #C2F6FF;
            }
          }
        }
      }

    }

    .dv-border-bg2 {
      height: 280px !important;
      background-image: url("../assets/image/612_280.png");
      display: flex;
      padding: 32px 26px;

      .dv-icon-box {
        margin-bottom: 14px !important;
      }
      .dv-icon-bottom{
        margin-bottom: 14px !important;
      }
    }
  }

  .basic-right {
    .basic-header {
      width: 612px;
    }
  }

  .basic-left {
    .basic-header {
      width: 612px;
      // margin-left: 4px;
    }
  }

}

.bg-32DCFB{
  font-size: 32px;
  color: #32DCFB;
  height: 48px;
  line-height: 48px;
  font-family: "bahnschrift";
  // background: linear-gradient( #32DCFB, rgba(255,255,255,0.5) 100%) !important;
  // -webkit-background-clip: text !important;
  // -webkit-text-fill-color: transparent !important;
}
.bg-FFE04D{
  color: #FFE04D !important;
  font-size: 32px;
  height: 48px;
  line-height: 48px;
  font-family: "bahnschrift";
  // background: linear-gradient( #FFE04D, rgba(255,255,255,1) 100%) !important;
  // -webkit-background-clip: text !important;
  // -webkit-text-fill-color: transparent !important;
}
</style>